<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 现在开始引入代理对象proxyImage，通过这个代理对象，在图片被真正加载好之前，页面中将出现一张占位的哈士奇图片，来提示用户图片正在加载 -->
    <script type="module">
        // const path = require("path")
        var myImage = (function(){
            var imgNode = document.createElement('img');
            document.body.appendChild( imgNode );

            return {
              setSrc: function( src ){
                  imgNode.src = src;
              }
            }
        })();

        var proxyImg = (function () {
            var img = new Image()
            img.onload = function () {
                console.log(this,img);
                myImage.setSrc( this.src )
            }

            return {
                setSrc : function (src) {
                    myImage.setSrc("./p.webp")
                    // myImage.setSrc(require(path.resolve(__dirname , "./p.webp")))
                    img.src = src
                }
            }
        })()
        // 测试未使用代理
        // myImage.setSrc('https://img1.baidu.com/it/u=2165440039,133472691&fm=253&fmt=auto&app=138&f=JPEG?w=801&h=500');
        // 测试使用代理后
        proxyImg.setSrc('https://img1.baidu.com/it/u=2165440039,133472691&fm=253&fmt=auto&app=138&f=JPEG?w=801&h=500')
    </script>
    <!-- 现在我们通过对赋值src属性的函数进行代理，当加载另一个img的时候去触发真正的赋值函数 -->
</body>
</html>